<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ColorPicker Examples</title>
		<link rel="stylesheet" href="../themes/default/default.css" />
		<script src="../kindeditor-min.js"></script>
		<script>
			KindEditor.ready(function(K) {
				var colorpicker;
				K('#colorpicker').bind('click', function(e) {
					e.stopPropagation();
					if (colorpicker) {
						colorpicker.remove();
						colorpicker = null;
						return;
					}
					var colorpickerPos = K('#colorpicker').pos();
					colorpicker = K.colorpicker({
						x : colorpickerPos.x,
						y : colorpickerPos.y + K('#colorpicker').height(),
						z : 19811214,
						selectedColor : 'default',
						noColor : '无颜色',
						click : function(color) {
							K('#color').val(color);
							colorpicker.remove();
							colorpicker = null;
						}
					});
				});
				K(document).click(function() {
					if (colorpicker) {
						colorpicker.remove();
						colorpicker = null;
					}
				});
			});
		</script>
	</head>
	<body>
		<input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />
	</body>
</html>
